<!-- 顶部栏组件 -->
<template>
  <div class="h-full flex items-center">
    <ElButton
      size="mini"
      class="mr-3 hidden-sm-and-up"
      @click="store.commit('fileTree/switchFileTree', true)"
      ><i class="fa fa-folder-open-o"></i
    ></ElButton>
    <div
      class="flex justify-between items-center w-full"
      v-if="store.state.markdown.id"
    >
      <div class="flex items-end">
        <div class="flex text-2xl font-bold truncate">
          {{ store.state.markdown.name }}
        </div>

        <div class="text-sm ml-3 hidden-xs-only">
          创建者:
          <ElTag size="mini">{{ store.state.markdown.user.name }}</ElTag>
        </div>

        <div class="text-sm ml-3 hidden-xs-only">
          <ElTag size="mini">{{
            store.state.markdown.editable ? "所有人可编辑" : "仅发布者可编辑"
          }}</ElTag>
        </div>
      </div>

      <div class="">
        <ElButton
          class="hidden-xs-only"
          :loading="btnLoading"
          size="small"
          v-if="store.state.editor.editMode === 'preview'"
          type="primary"
          @click="startEdit"
          :disabled="!editable || occupied"
          >{{
            store.state.markdown.occupyUser
              ? store.state.markdown.occupyUser.name + "正在编辑"
              : "开始编辑"
          }}</ElButton
        >
        <ElButton
          :loading="btnLoading"
          size="small"
          v-if="store.state.editor.editMode === 'editable'"
          @click="stopEdit"
          >退出编辑</ElButton
        >
      </div>
    </div>

    <div v-else class="text-bold text-xl text-main">欢迎使用OIL-WIKI</div>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElTag } from "element-plus"
import { useStore } from "@/store/index"
import useState from "./hooks/useState"
import useStartEdit from "./hooks/useStartEdit"
import useStopEdit from "./hooks/useStopEdit"
const store = useStore()
const { btnLoading, editable, occupied } = useState()
const { startEdit } = useStartEdit(btnLoading)
const { stopEdit } = useStopEdit(btnLoading)
</script>

<style lang="scss" scoped></style>
